<template>
    <div>
        <div class="shopCar-content">
            <div class="mui-card" v-for="(item,i) in productsList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner shopcar-f">
						<mt-switch v-model="$store.getters.getSelect[item.id]" @change="selectChange(item.id,$store.getters.getSelect[item.id])"></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="title">
                            <h1>{{ item.title }}</h1>
                            <div>
                                <span>{{ item.sell_price }}</span>
                                <!-- 组件 -->
                                <shopcarNum :ProductCount="$store.getters.getCount[item.id]" :id="item.id"></shopcarNum>
                                <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                            </div>
                        </div>
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner money">
						<div>
                            <p>总价(不含运费)</p>
                            <p>已勾选商品&nbsp;<span class="red">{{ $store.getters.getAllCountAndPrice.c }}</span>&nbsp;件，总价: <span class="red">¥{{ $store.getters.getAllCountAndPrice.p }}</span></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
        <p>{{ $store.getters.getSelect }}</p>
        </div>
    </div>
</template>

<script>
    import shopcarNum from '../subcomponent/shopcar-number.vue'
    export default {
        //首先页面加载的时候自动获取vuex中car数组中商品的id，然后再向服务器发送请求，通过id，查询商品列表
        data: function(){
            return {
                id: '',
                productsList: []
            }
        },
        created: function(){
            //这里得到的是ID数组
          var idArr= this.$store.getters.getIdByCar
          //将数组转化为字符串并且用','分割
          this.id= idArr.join(',')
          this.getProductslist()
        },
        methods: {
            getProductslist: function(){
                this.$http.get('http://127.0.0.1:4000/api/goods/getshopcarlist?id='+this.id).then(res => {
                   this.productsList= res.body.message
                })
            },
            remove: function(id,i){
                //这里要删除两项，1,删除productsList，2，删除car中的数据
                this.productsList.splice(i,1)
                 this.$store.commit('reomveById',id)

            },
            selectChange: function(id,val){
               this.$store.commit('selectChange',{id:id,value:val})
            }
        },
        components: {
            shopcarNum: shopcarNum
        }
    }
</script>

<style lang="scss" scoped>
    .shopCar-content{
        background-color: #eee;
        overflow: hidden;
        .shopcar-f {
            display: flex;
            flex-direction: row;
            justify-content:space-around;
            img {
                width: 60px;
                height: 60px;
            }
            .title{
                h1 {
                    font-size: 14px;   
                }
                div {
                    display: flex;
                     justify-content:space-around;
                     span {
                        color: red;
                         line-height: 35px;
                     }
                     a {
                          line-height: 35px;
                     }
                }
            }
        }
        .money{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            .red {
                color: red;
                font-weight: 700;
            }
        }
    }
</style>
